<template>
    <div id="sample">
        <van-nav-bar
                :title="$route.meta.title"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <!--        轮播展示-->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>


        <!--        工资列表-->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="userSalary">
            <van-cell-group inset v-for="item in slist" :key="item" :title="item.xcmonth">
                <van-cell title="基本工资" :value="item.gcgz" />
                <van-cell title="绩效工资" :value="item.jxgz" />
                <van-cell title="个税扣缴" :value="item.pfax" />
                <van-cell title="社保个人扣缴" :value="item.sbfee" />
                <van-cell title="发薪日期" :value="item.fxdate|dateFmt" />
            </van-cell-group>

        </van-list>

    </div>
</template>
<script>
    import {NavBar} from "vant";
    import $api from "@/api/index";

    export default {
        data() {
            return {
                list: [],
                slist: [],
                loading: false,
                finished: false,
            };
        },
        components: {
            [NavBar.name]: NavBar,
        },
        name: "salary",
        created() {
            this.userSalary();
        },
        methods: {
            //用户工资
            async userSalary() {
                const result = await $api.salary.info();
                this.slist = result.data;
                for(var i=0;i<this.slist.length;i++){
                    this.slist[i]['xcmonth']=this.slist[i]['xcmonth']+"月";
                }
                this.loading = false;
                this.finished=true
            }

        },
        // filter 过滤器
        filters: {
            dateFmt: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                let h = date.getHours();
                h = h < 10 ? "0" + h : h;
                let m = date.getMinutes();
                m = m < 10 ? "0" + m : m;
                let s = date.getSeconds();
                s = s < 10 ? "0" + s : s;
                return y + "-" + MM + "-" + d + " ";
            }
        }
    }
</script>
<style>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
</style>
